<template>
  <div class="title">
      商品列表
  </div>
  <el-table
    :data="tableData"
    :border="parentBorder"
    :preserve-expanded-content="preserveExpanded"
    style="width: 100%"
  >
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <h3>商品详情</h3>
          <el-table :data="[props.row]">
            <el-table-column label="商品ID" prop="id" />
            <el-table-column label="商品名称" prop="name" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="商品名称" prop="name" />
    <el-table-column label="商品分类" prop="category" />
    <el-table-column label="商品价格" prop="price" />
    <el-table-column label="商品图片">
      <template #default="scope">
        <img :src="serveUrl+scope.row.imgUrl" alt="商品图片" style="max-width: 100px; max-height: 100px;">
      </template>
    </el-table-column>
    <el-table-column label="商品描述" prop="goodsDesc" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button  size="small" @click="handleDelete(scope.row.id)" :style="{ backgroundColor: '#f56c6c' }">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getGoodList, delGoods } from '../../api/account'; 
import dayjs from 'dayjs';
import { ElMessageBox } from 'element-plus';
import { serveUrl } from '../../utils/common';

const router = useRouter();
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const parentBorder = ref(true);
const childBorder = ref(true);
const preserveExpanded = ref(true);

const fetchData = async () => {
try {
  const res = await getGoodList({
    currentPage: currentPage.value,
    pageSize: pageSize.value
  });

  if (res.data && Array.isArray(res.data)) { 
    tableData.value = res.data; 
    total.value = res.total;    
  } else {
    console.error('接口数据结构异常:', res.data);
    tableData.value = [];
    total.value = 0;
  }
} catch (error) {
  console.error('获取商品列表失败:', error);
}
};

onMounted(() => {
fetchData();
});

const handleSizeChange = (newSize) => {
pageSize.value = newSize;
fetchData();
};

const handleCurrentChange = (newPage) => {
currentPage.value = newPage;
fetchData();
};

const handleEdit = (row) => {
  // 使用encodeURIComponent处理特殊字符
  const encodedData = encodeURIComponent(JSON.stringify(row))
  router.push({
    name: 'GoodsEdit',
    query: {  // 使用query参数传递数据
      data: encodedData
    }
  })
}

const handleDelete = async (id) => { 
try {
  await ElMessageBox.confirm('确定要删除该商品吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  });
  await delGoods(id); 
  fetchData();
} catch (error) {
  if (error!== 'cancel') {
    console.error('删除失败:', error);
  }
}
};

const formatTime = (time) => {
return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
};
</script>

<style scoped>
.title {
width: 100%;
height: 50px;
font-size: 20px;
color: #333;
line-height: 50px;
padding-left: 20px;
text-align: left;
border-bottom: 1px solid #dcdfe6;
}

:deep(.el-table__cell) {
height: 47px;
line-height: 47px;
padding: 0;
font-weight: 100;
font-size: 14px;
}
</style>